<form nz-form [formGroup]="cloumnForm">

  <!-- 栏目标题名称 -->
  <nz-form-item>
    <nz-form-label nzRequired nzFor="title">标题</nz-form-label>
    <nz-form-control>
      <input nz-input placeholder="栏目标题" [(ngModel)]="cloumn.title" formControlName="title">
      <nz-form-explain *ngIf="cloumnForm.get('title').dirty && cloumnForm.get('title').errors">
        <ng-container *ngIf="cloumnForm.get('title').errors['required']">此项为必填项！</ng-container>
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <!-- 父级 -->
  <nz-form-item>
    <nz-form-label nzFor="parent">父级</nz-form-label>
    <nz-form-control>
      <cloumn-parent-combo [isFindRoot]="'true'" [cloumnId]="cloumn.parentId" placeholder="请选择父级" (selectedCloumnChange)="parentSelectedCloumnChange($event)"></cloumn-parent-combo>
    </nz-form-control>
  </nz-form-item>

  <!-- 栏目类型 -->
  <nz-form-item>
    <nz-form-label nzRequired nzFor="parent">栏目类型</nz-form-label>
    <nz-form-control>
      <enum-combo [enumId]="cloumn.columnType" placeholder="请选择栏目类型" fullName="Magicodes.Admin.Contents.ColumnTypes"
        (selectedValueChange)="typeSelectedValueChange($event)"></enum-combo>
    </nz-form-control>
  </nz-form-item>

  <!-- 最大子项数量 -->
  <nz-form-item>
    <nz-form-label nzFor="maxItemCount">最大子项数量</nz-form-label>
    <nz-form-control>
      <nz-input-number nzPlaceHolder="最大子项数量" [(ngModel)]="cloumn.maxItemCount" formControlName="maxItemCount" [nzStep]="1"></nz-input-number>
    </nz-form-control>
  </nz-form-item>

  <!-- 导航位置 -->
  <nz-form-item>
    <nz-form-label nzRequired nzFor="subscriptionVersion">导航位置</nz-form-label>
    <nz-form-control>
      <nz-radio-group [(ngModel)]="subscriptionVersion" formControlName="subscriptionVersion">
        <label nz-radio nzValue="Top">头部</label>
        <label nz-radio nzValue="Bottom">底部</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <!-- 链接 -->
  <nz-form-item>
    <nz-form-label nzFor="url">链接</nz-form-label>
    <nz-form-control>
      <input nz-input placeholder="链接" [(ngModel)]="cloumn.url" formControlName="url">
    </nz-form-control>
  </nz-form-item>

  <!-- 描述 -->
  <nz-form-item>
    <nz-form-label nzFor="description">描述</nz-form-label>
    <nz-form-control>
      <textarea rows="3" nz-input placeholder="描述" name="description" [(ngModel)]="cloumn.description" formControlName="description"></textarea>
    </nz-form-control>
  </nz-form-item>

  <!-- 简介 -->
  <nz-form-item>
    <nz-form-label nzFor="introduction">简介</nz-form-label>
    <nz-form-control>
      <textarea rows="3" nz-input placeholder="简介" name="introduction" [(ngModel)]="cloumn.introduction"
        formControlName="introduction"></textarea>
    </nz-form-control>
  </nz-form-item>

  <!-- 是否启用 -->
  <div nz-col nzSpan="24">
    <div nz-row>
      <div style="margin-bottom: 20px;" nz-col nzSpan="24">
        <label nz-checkbox name="isActive" [(ngModel)]="cloumn.isActive" [ngModelOptions]="{standalone: true}">是否启用</label>
      </div>
    </div>
  </div>

  <!-- 是否需要授权 -->
  <div nz-col nzSpan="24">
    <div nz-row>
      <div style="margin-bottom: 20px;" nz-col nzSpan="24">
        <label nz-checkbox name="isAuthorization" [(ngModel)]="cloumn.isNeedAuthorizeAccess" [ngModelOptions]="{standalone: true}">是否需要授权</label>
      </div>
    </div>
  </div>

  <!-- 是否为静态 -->
  <div nz-col nzSpan="24">
    <div nz-row>
      <div style="margin-bottom: 20px;" nz-col nzSpan="24">
        <label nz-checkbox name="isStatic" [(ngModel)]="cloumn.isStatic" [ngModelOptions]="{standalone: true}">是否为静态属性(静态属性创建后无法删除)</label>
      </div>
    </div>
  </div>

</form>

<div class="drawer_footer">
  <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>取消</span></button>
  <button nz-button type="button" class="ant-btn ant-btn-primary" [nzLoading]="isLoadingBtn" (click)="submitForm()"><span>提交</span></button>
</div>